import QtQuick 2.0
import "delegate"
import "articlecontent"
import "common"

import org.qtproject.znews_qt 1.0

BasePage {

    id: id_mainwindow

    state:  _STATE_SHOWMAINVIEW
    states: [
        State {
            name: _STATE_SHOWLEFTMENU
            PropertyChanges { target: id_leftmenu; x: 0 }
            PropertyChanges { target: id_mainview; opacity: 0.3 }
        },

        State{
            name: _STATE_SHOWMAINVIEW
            PropertyChanges { target: id_leftmenu; x: - id_leftmenu.width - 10}
            PropertyChanges { target: id_mainview; opacity:1 }
        }
    ]
    transitions: Transition {
        NumberAnimation { properties: "x,opacity"; duration: 600; easing.type: Easing.OutQuint }
    }



//---------------signal-------------------------------------------------------------------------------------

    //lay data theo nguon bao
    signal getArticleCategoryRequestFromSource(int sourceId);

//---------------funtion-------------------------------------------------------------------------------------
    function onAddMenuCategoryInfo(idCategoryInfo, icon, name)
    {
        id_leftmenu.addMenuDelegate(idCategoryInfo, icon,name);
    }


    function displayContentArticle(title, thumbnailImage, time, nameSourceArticle, contentText) {

        if(id_mainwindow.state === _STATE_SHOWMAINVIEW){

            listViewCategory.visible = false;
            id_articleContent.visible = true;

            id_articleContent.txtArticleTitle = title;
            id_articleContent.txtArticleThumbnaiImageFromSource = thumbnailImage;
            id_articleContent.txtArticleTime = time;
            id_articleContent.txtArticleNameSource = nameSourceArticle;
            id_articleContent.txtArticleContent = contentText;

            //id_header.title="Content";

            id_header.showBack = true;
        } else {
            id_mainwindow.state = _STATE_SHOWMAINVIEW;
        }
    }

//---------------property-------------------------------------------------------------------------------------
    // property and const
    // const state
    property string _STATE_SHOWMAINVIEW : "state_showmainview"
    property string _STATE_SHOWLEFTMENU : "state_showleftmenu"


//---------------header - gui (phan giao dien va tuong tac o day)---------------------------------------------------------------
    Header{
        id:id_header
        title: "Tin mới ..."

        onBackClicked: {
            id_articleContent.visible = false;
            listViewCategory.visible = true;
            id_header.showBack = false;
            console.log("Main backed ");
        }

        onLeftMenuClicked: {

            console.log("Main show leftmenu ");

            if (id_mainwindow.state !== _STATE_SHOWLEFTMENU) {
                id_mainwindow.state = _STATE_SHOWLEFTMENU
                id_mainview.focus = false;
            } else {
                id_mainwindow.state = _STATE_SHOWMAINVIEW
            }

        }
    }

//---------------main view-------------------------------------------------------------------------------------
    Item{
        // mainview kieu item : de set thuoc tinh opacity
        id: id_mainview
        anchors.top: id_header.bottom;
        anchors.topMargin: 5;
        width: id_mainwindow.width

        ListModel {
            id: modelListCategory
        }

        ListView {
            id: listViewCategory
            //y: id_header.height + 5   /* chu y header */
            width: id_mainwindow.width
            height: id_mainwindow.height
            orientation: ListView.Horizontal

            model : ApplicationInfo.categoryListModel;

            delegate: CatergoryDelegate {
                m_id: idcategorydelegate
            }

            onMovementEnded: {
                if (listViewCategory.atXEnd) {
                    console.info("count listviewcategory ", listViewCategory.count );
                    ApplicationInfo.onUpdateMoreCategoryRequest(listViewCategory.count);
                }
            }
        }
    }

    //---------------ArticleContent-------------------------------------------------------------------------------------
    ArticleContent {
        id: id_articleContent
        y: id_header.height + 5   /* chu y header */
        visible: false
    }

    //---------------left menu-------------------------------------------------------------------------------------
    Menu {
        id: id_leftmenu
        width: 400 * ApplicationInfo.ratio
        y:id_header.height;
        height: id_mainwindow.height - id_header.height
        focus: true;

    }

    Component.onCompleted: {
        ApplicationInfo.displayContentArticle.connect(displayContentArticle)
    }

}
